<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <title>文件服务器</title>
  <style>
    /* 基本的样式设置 */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
    }

    /* 标题样式 */
    h3 {
      text-align: center;
      color: #333;
      margin-bottom: 20px;
    }

    /* 文件输入字段包裹元素的样式 */
    .file-input-wrapper {
      border: 1px solid #ccc; /* 实线边框 */
      padding: 5px; /* 内边距 */
      display: inline-block; /* 使包裹元素与按钮在同一行，如果需要的话 */
      margin-bottom: 5px; /* 下边距 */
    }

    /* 表单样式 */
    form#fileUploadForm {
      width: 100%;
      max-width: 400px;
      margin: 0 auto;
    }

    form#fileUploadForm input[type="file"] {
      display: block;
      margin-bottom: 10px;
    }

    form#fileUploadForm input[type="button"] {
      display: block;
      width: 100%;
      padding: 10px;
      font-size: 20px; /* 注意这里我们使用了20px而不是30px，以保持一致性 */
      background-color: #4CAF50; /* 绿色背景 */
      color: white; /* 白色文字 */
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    /* 结果容器样式 */
    #result-container {
      margin-top: 20px;
      border: 1px solid #ccc;
      padding: 10px;
      border-radius: 4px;
    }

    /* 假设的列表项样式（Key C 和 Key E 列表） */
    #result-container ul li {
      list-style-type: none;
      margin-bottom: 5px;
    }

    /* 内部文件信息容器的样式（如果需要的话） */
    #interFileInfoContainer {
      /* 这里可以添加你需要的样式 */
    }

    /* 你可以根据需要添加更多的样式 */
  </style>
</head>
<body>

<h3>单文件上传</h3>
<form id="fileUploadForm" enctype="multipart/form-data">
  <div   class="file-input-wrapper" >
      <input type="file" id="singleFile" name="singleFile" style="font-size: 20px"><br>
  </div>
  <input type="button" id="singleFileUploadButton1" value="上传" style="font-size: 30px">
</form>

<div id="result-container">
</div>


<script>
  function uploadFile() {
    var formData = new FormData($('#fileUploadForm')[0]);
    $.ajax({
      url: 'http://localhost:8080/file/uploadFile', // 假设这是你的API端点
      type: 'POST',
      data: formData,
      contentType: false, // 必须false才会自动加上正确的Content-Type
      processData: false, // 必须false才会避开jQuery对formdata的默认处理
      dataType: 'json', // 告诉jQuery你期望返回JSON数据
      success: function(data) { // 当请求成功时调用
        displayResult(data);
      },
      error: function(xhr, status, error) {
        // 处理错误情况
        console.error("Error: " + error);
        $('#result-container').text('上传失败: ' + error);
      }
    });
  }

  // 一个函数来在页面上显示ResultVO的内容
  function displayResult(resultVO) {
    var container = $('#result-container'); // 获取显示结果的容器
    container.empty(); // 清空容器内容
    // 假设你有一个模板字符串来展示ResultVO的内容
    var templateBase = `
    <h5>文件信息:</h5>
    <p>File ID: {{fileId}}</p>
    <p>File Name: {{fileName}}</p>
    <p>File Path: {{filePath}}</p>
    <h6>Key C:</h6>
    <ul class="keyCList"></ul>
    <h6>Key E:</h6>
    <ul class="keyEList"></ul>
    <h5>内部文件信息:</h5>
    <div id="interFileInfoContainer"></div>

`;

    // 添加调试语句来检查resultVO的内容
    console.log(resultVO); // 这将打印整个resultVO对象到控制台

    // 使用字符串替换方法填充模板中的占位符
    var htmlContent = templateBase
            .replace('{{fileId}}', resultVO.fileId)
            .replace('{{fileName}}', resultVO.fileName)
            .replace('{{filePath}}', resultVO.filePath);
    // 将填充后的HTML内容转换为jQuery对象并插入到容器中
    var fileKeysVOContainer2 = $(htmlContent);
    container.append(fileKeysVOContainer2);
    // 显示Key C和Key E列表（这里假设displayList函数已定义）
    var keyCList1 = fileKeysVOContainer2.find('.keyCList');
    displayList('Key C', resultVO.keyC, keyCList1);
    var keyEList1 = fileKeysVOContainer2.find('.keyEList');
    displayList('Key E', resultVO.keyE, keyEList1);

    // 显示Key C和Key E列表
    displayList2('Key C', resultVO.keyC, keyCList1);
    displayList2('Key E', resultVO.keyE, keyEList1);

    // 添加额外的调试语句来检查列表是否被正确填充
    console.log(keyCList1.html()); // 这将打印Key C列表的HTML内容到控制台
    console.log(keyEList1.html()); // 这将打印Key E列表的HTML内容到控制台

    // 显示内部文件信息
    var interFileInfoContainer = $('#interFileInfoContainer');
    if (resultVO.interFileInfo && Array.isArray(resultVO.interFileInfo)) {
      resultVO.interFileInfo.forEach(function(fileKeysVO) {
        displayFileKeysVO(fileKeysVO, interFileInfoContainer);
      });
    }
    // 递归函数来显示FileKeysVO的内容
    function displayFileKeysVO(fileKeysVO, container) {
      var fileKeysVOTemplate = `
            <div>
                <h5>内部文件ID: ${fileKeysVO.fileId}</h5>
                <p>内部文件路径: ${fileKeysVO.filePath}</p>
                <h6>Key C:</h6>
                <ul></ul>
                <h6>Key E:</h6>
                <ul></ul>
                <h6>交互Key C:</h6>
                <ul></ul>
                <h6>交互Key E:</h6>
                <ul></ul>
                <p>交互C数量: ${fileKeysVO.interCNum}</p>
                <p>交互E数量: ${fileKeysVO.interENum}</p>
            </div>
        `;
      var fileKeysVOContainer = $(fileKeysVOTemplate);
      // 显示Key C列表
      var keyCList = fileKeysVOContainer.find('ul:eq(0)');
      displayList('', fileKeysVO.keyC, keyCList);
      // 显示Key E列表
      var keyEList = fileKeysVOContainer.find('ul:eq(1)');
      displayList('', fileKeysVO.keyE, keyEList);
      // 显示交互Key C列表（这里假设interKeyC已经是一个列表）
      var interKeyCList = fileKeysVOContainer.find('ul:eq(2)');
      displayList('', fileKeysVO.interKeyC, interKeyCList);
      // 显示交互Key E列表（这里假设interKeyE已经是一个列表）
      var interKeyEList = fileKeysVOContainer.find('ul:eq(3)');
      displayList('', fileKeysVO.interKeyE, interKeyEList);
      // 将FileKeysVO的内容添加到容器中
      container.append(fileKeysVOContainer);
    }
    // 辅助函数来显示列表
    function displayList(listId, listData, $listContainer) {
      if (!$listContainer) {
        $listContainer = $('#' + listId);
      }
      if (listData && Array.isArray(listData)) {
        listData.forEach(function(item) {
          $listContainer.append($('<li>').text(item));
        });
      }
    }

    function displayList2(title, listData, $listContainer) {
      // 清除旧列表项
      $listContainer.empty();

      // 添加新的列表项
      listData.forEach(function(item) {
        $listContainer.append('<li>' + item + '</li>');
      });

      // 如果需要，可以在这里添加标题
      if (title) {
        $listContainer.before('<h6>' + title + '</h6>');
      }
    }
  }

  // 例如，在某个事件（如按钮点击）uploadFile
  $(document).ready(function() {
    // 给上传按钮绑定点击事件
    $('#singleFileUploadButton1').on('click', function() {
      uploadFile();
    });
  });
</script>

</body>
</html>